<template>
  <div class="sunshine-panel" @click.stop>
    <div class="sunshine-title">日照分析</div>
    <el-form label-position="left" label-width="80px" size="small">
      <el-form-item label="底面高度">
        <el-input v-model="sunshineConfig.extrudedHeight" placeholder="请输入底面高度">
          <template #append>m</template>
        </el-input>
      </el-form-item>
      <el-form-item label="高度">
        <el-input v-model="sunshineConfig.height" placeholder="请输入高度">
          <template #append>m</template>
        </el-input>
      </el-form-item>
      <el-form-item label="采样间距">
        <el-input v-model="sunshineConfig.sampleDistance" placeholder="请输入采样间距">
          <template #append>m</template></el-input
        >
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input v-model="sunshineConfig.startTime" placeholder="请输入开始时间">
          <template #append>ms</template>
        </el-input>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input v-model="sunshineConfig.endTime" placeholder="请输入结束时间">
          <template #append>ms</template>
        </el-input>
      </el-form-item>
      <el-form-item label="间隔时间">
        <el-input v-model="sunshineConfig.spanTime" placeholder="请输入间隔时间">
          <template #append>h</template>
        </el-input>
      </el-form-item>
      <el-form-item label="总面积"> {{ sunshineConfig.area }} ㎡</el-form-item>
      <el-form-item label="周长"> {{ sunshineConfig.perimeter }} ㎡</el-form-item>
      <el-form-item label="分析进度"> {{ sunshineConfig.progress }} %</el-form-item>
    </el-form>
    <div class="button-create">
      <el-button type="primary" @click="createESSunshineAnalysis">
        {{ startSunshineAnalysis ? '重新创建' : '开始创建' }}</el-button
      >
      <el-button type="primary" :disabled="!startSunshineAnalysis" @click="startAnalysis"
        >开始分析</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { getobjm } from '@/utils/getobjm.js'
import { ESSunshineAnalysis } from 'earthsdk3'
import { useStartAnalysisStore } from '@/stores/startAnalysis.js'
const startAnalysisStore = useStartAnalysisStore()
const objm = getobjm()
// 人员配置属性
const sunshineConfig = ref({
  extrudedHeight: 0, //底面高度m
  height: 30, //高度m
  sampleDistance: 10, //采样间距m
  startTime: 0, //开始时间（时间戳）
  endTime: 36000000, //结束时间（时间戳）
  spanTime: 1, //时间跨度,默认1小时时间戳
  area: 0, //面积
  perimeter: 0, //周长
  progress: 0, //分析进度
  depthTest: true,
})

// 定义emit，用于通知父组件关闭配置面板
const emit = defineEmits(['close-panel'])
const sceneObjectESSunshineAnalysis = ref(null)
const startSunshineAnalysis = ref(false)
const createESSunshineAnalysis = () => {
  if (sceneObjectESSunshineAnalysis.value) {
    objm.destroySceneObject(sceneObjectESSunshineAnalysis.value)
  }
  sceneObjectESSunshineAnalysis.value = objm.createSceneObject(ESSunshineAnalysis)
  if (!sceneObjectESSunshineAnalysis.value) return
  sceneObjectESSunshineAnalysis.value.extrudedHeight = sunshineConfig.value.extrudedHeight
  sceneObjectESSunshineAnalysis.value.height = sunshineConfig.value.height
  sceneObjectESSunshineAnalysis.value.sampleDistance = sunshineConfig.value.sampleDistance
  sceneObjectESSunshineAnalysis.value.startTime = sunshineConfig.value.startTime
  sceneObjectESSunshineAnalysis.value.endTime = sunshineConfig.value.endTime
  sceneObjectESSunshineAnalysis.value.spanTime = sunshineConfig.value.spanTime
  sceneObjectESSunshineAnalysis.value.editing = true
  sceneObjectESSunshineAnalysis.value.areaChanged.don((val) => {
    sunshineConfig.value.area = val.toFixed(2)
  })
  sceneObjectESSunshineAnalysis.value.perimeterChanged.don((val) => {
    sunshineConfig.value.perimeter = val.toFixed(2)
  })
  startAnalysisStore.startAnalysisState = true
  sceneObjectESSunshineAnalysis.value.editingChanged.disposableWeakOn(() => {
    if (
      sceneObjectESSunshineAnalysis.value &&
      sceneObjectESSunshineAnalysis.value.editing === false
    ) {
      const pos = sceneObjectESSunshineAnalysis.value.points?.length
      setTimeout(() => {
        if (pos && pos >= 3) {
          startSunshineAnalysis.value = true
        }
      }, 300)
    }
  })
}

const startAnalysis = async () => {
  await sceneObjectESSunshineAnalysis.value.start()
  sceneObjectESSunshineAnalysis.value.progressChanged.don((val) => {
    sunshineConfig.value.progress = val.toFixed(2)
  })
}

onUnmounted(() => {
  // 清空
  if (sceneObjectESSunshineAnalysis.value) {
    objm.destroySceneObject(sceneObjectESSunshineAnalysis.value)
  }
  startAnalysisStore.startAnalysisState = false
})
</script>

<style lang="scss" scoped>
.sunshine-panel {
  width: 280px;
  color: #ffffff;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  border: 1px solid rgba(0, 195, 255, 0.6);
  padding: 8px;

  .sunshine-title {
    font-size: 14px;
    color: #00c3ff;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 195, 255, 0.3);
  }

  .full-width {
    width: 100%;
  }

  .button-create {
    :deep(.el-button) {
      width: 100%;
      background-color: rgba(0, 195, 255, 0.2);
      border: 0.0521vw solid rgba(0, 195, 255, 0.6);
      color: #00c3ff;
      border-radius: 0.2083vw;
      font-size: 0.625vw;
      height: 1.6667vw;
      line-height: 1.6667vw;
      margin: 0;
      margin-top: 10px;
      &:hover {
        background-color: rgba(0, 195, 255, 0.4);
      }
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 12px;

  .el-form-item__label {
    color: #ffffff;
    font-size: 12px;
  }
}

:deep(.el-input__wrapper),
:deep(.el-input-number__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(60, 60, 70, 0.8);
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #ffffff;
  height: 28px;
}

:deep(.el-input-group__append) {
  background-color: rgba(0, 195, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(60, 60, 70, 0.8);
  padding: 0 10px;
}

:deep(.el-select-dropdown) {
  background-color: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(60, 60, 70, 0.8);

  .el-select-dropdown__item {
    color: #ffffff;

    &.selected {
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.2);
    }

    &:hover {
      background-color: rgba(64, 158, 255, 0.1);
    }
  }
}

:deep(.el-slider) {
  --el-slider-main-bg-color: #409eff;
  --el-slider-runway-bg-color: rgba(64, 158, 255, 0.2);
  --el-slider-stop-bg-color: #ffffff;
  --el-slider-height: 6px;

  .el-slider__button {
    border: 2px solid #409eff;
    background-color: #ffffff;
  }

  .el-slider__runway {
    height: 6px;
  }

  .el-slider__bar {
    height: 6px;
  }
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: rgba(30, 30, 40, 0.8);
  color: #ffffff;
  border-color: rgba(60, 60, 70, 0.8);
}

:deep(.el-tooltip__trigger) {
  color: #ffffff;
}
</style>
